<template>
    <div class="component-contact">
        <div class="component-contact__header">
            <div class="component-contact__header-box" @click='tel'>
                <p><img src="../images/contact_cs@3x.png"></p>
                <span>电话客服</span>
            </div>
            <div class="component-contact__header-box" @click='online'>
                <p><img src="../images/contact_os@3x.png"></p>
                <span>在线客服</span>
            </div>
        </div>
        <p class="component-contact__phone">周一至周五 9:00~18:00</p>
        <p class="component-contact__tips">（法定节假日除外）</p>
    </div>
</template>

<script>
    export default {
        props: {

        },
        data(){
            return {
            }
        },
        computed:{

        },
        methods:{
            tel(){
                location.href='tel:0571-87098933'
            },
            online(){
                location.href='https://qiyukf.com/client?k=c0023d907dc0e8a8b4b400841e6f57c3&wp=1'
            },
        },
        created() {

        },
    }
</script>

<style lang="scss">
    @import "../sass/_variables";
    @import "../sass/_extends";
    @import "../sass/_mixins"; 
    .component-contact{
        padding-top: 24px;
        padding-bottom: 24px;
    }
    .component-contact__header{
        display: flex;
        justify-content: center;
    }
    .component-contact__header-box{
        // border:1px solid $orange;
        display: flex;
        align-items: center;
        padding:0 16px;
        border-radius:2px;
        color:$orange;
        @extend %font-button;
        line-height:35px;
        p{
            box-sizing:border-box;
            background-color: $orange;
            border-radius:50%;
            width: 32px;
            height:32px;
            display: flex;
            align-items: center;
            justify-content: center;
            img{
                display: block;
                width: 21px;
                height: 21px;
            }
        }
        span{
            @extend %font-button;
            padding-left: 8px;
            display: block;
        }
    }
    .component-contact__phone{
        @extend %font-caption;
        text-align:center;
        padding-top: 8px;
    }
    .component-contact__tips{
        font-size: 11px;
        text-align:center;
        padding-top: 3px;
    }

</style>
